<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.zhezhao{
				width: 100%;
				height: 100%;
				background: #ccc;
				position: fixed;
				top: 0;
				opacity: 0.5;
				display: none;
			}
			.bbb{
				width: 100%;
				height: 100%;
				position: fixed;
				top: 0;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.modal_content{
				width: 200px;
				height: 200px; 
				outline: 1px red solid;
				overflow: auto;
				background: #fff;
			}
			.modal-open{
			    position: fixed;
			    width: 100%;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<button>按钮</button>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			<p>00000000000000000000000000000000000</p>
			
		</div>
		
		
		
		
		<!--遮罩-->
		<div class="zhezhao"></div>
		
		<!--弹窗区域-->
		<div class="bbb">
			<div class="modal_content">
				<button class="btn">获取body以滚动高度</button>
				<p>1111111111111111</p>
				<p>1111111111111111</p>
				<p>1111111111111111</p>
				<p>1111111111111111</p>
				<p>1111111111111111</p>
				<p>1111111111111111</p>
				<p>1111111111111111</p>
				<p>1111111111111111</p>
				<p>1111111111111111</p>
				<p>1111111111111111</p>
				<p>1111111111111111</p>
				<p>1111111111111111</p>
				<p>1111111111111111</p>
				<p>1111111111111111</p>
				<p>1111111111111111</p>
				<p>1111111111111111</p>
				<p>1111111111111111</p>
				<p>1111111111111111</p>
				<p>1111111111111111</p>
				<p>1111111111111111</p>
				<p>1111111111111111</p>
				<p>1111111111111111</p>
				<p>1111111111111111</p>
				<p>1111111111111111</p>
				<p>1111111111111111</p>
				<p>1111111111111111</p>
				<p>1111111111111111</p>
				<p>1111111111111111</p>
			</div>
		</div>	
	
	</body>
</html>
<script src="../js/jquery-3.2.0.js"></script>
<script type="text/javascript">
	$('.bbb').hide()
	$('button').click(function(){
		$('.zhezhao,.bbb').show()
	  	var sTop = $(window).scrollTop()
  	 	$('body').addClass('modal-open');
        $('body').css({'top':-sTop + 'px'})
        
        $('.bbb,.btn').click(function(){
			$('body').removeClass('modal-open')
			$(window).scrollTop(sTop)
			$('.zhezhao,.bbb').hide()
        })
        $('.modal_content').click(function(){
        	return false
        })
	})
	
	
	


	
</script>